<template>
  <div id="app">
    <topBar />
    <!-- <router-view /> -->
    <div class="main">
      <sideBar />
      <div class="main-box">
        <div
          class="screen"
          :style="{
            transform: `scale(${value})`,
            background: `${color1}`,
            height: `${value2}px`,
            width: `${value3}px`
          }"
        >
          <component :is="curComponent"></component>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-slider v-model="value" :max="5" :step="0.05"></el-slider>
        </div>
      </div>
      <rightBar @tabClick="tabClick($event)">
        <template slot="default" v-if="tabsName == 'params'">
          <div class="tabs-content">
            <div class="tabs-item">
              页面高度：
              <el-slider style="width:100px" v-model="value2" :max="2000" :step="20"></el-slider>
            </div>
            <div class="tabs-item">
              页面宽度：
              <el-slider style="width:100px" v-model="value3" :max="2000" :step="20"></el-slider>
            </div>
            <div class="tabs-item">
              页面背景色：
              <el-color-picker v-model="color1"></el-color-picker>
            </div>
          </div>
        </template>
      </rightBar>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import sideBar from "@/components/sideBar";
import rightBar from "@/components/rightBar";
export default {
  name: "App",
  components: {
    topBar,
    sideBar,
    rightBar
  },
  data() {
    return {
      value: 0.75,
      value2: 700,
      value3: 500,
      color1: "#F7F9FB",
      tabsName: "params",
      curComponent: ""
    };
  },
  methods: {
    tabClick(e) {
      // console.log(e);
      this.tabsName = e;
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100%;
  .main {
    display: flex;
    width: 100%;
    height: 100%;
    .tabs-content {
      padding: 15px;
      width: 100%;
      .tabs-item {
        display: flex;
        align-items: center;
      }
    }
    .main-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 100%;
      overflow: scroll;
      background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0),
        linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
      background-position: 0 0, 13px 13px;
      background-size: 26px 26px;
      position: relative;

      .block {
        position: absolute;
        bottom: 70px;
        right: 30px;
        width: 150px;
      }
      .screen {
        // width: 500px;
        // height: 700px;
        background: white;
        box-shadow: 0 0 5px rgb(228, 205, 205);
        border-radius: 16px;
      }
    }
  }
}
</style>
